<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <#-- 引入bs的css样式-->
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <#-- 引入jquery依赖-->
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
    <#-- 引入bs的js库-->
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <#-- 自定义格式-->
    <style>
        .table{
            text-align: center;
        }
        .panel-footer{
            padding: 15px 5px 0px;
        }
        #adbtn{
            margin-right: 10px;
            margin-top: 2px;
        }
        #quer{
            margin-left: 20px;
        }
        #qwer{
            margin-left: -15px;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="panel panel-primary">
        <#-- 页头-->
        <div class="panel-heading">
            <h3 class="panel-title">
                <h3 align="center">[Dubbo + SSM + Freemarker + WebJars]---杨凯畅【2022】</h3>
            </h3>
        </div>
        <#-- 表格内容-->
        <table class="table table-striped table-hover">
            <tr>
                <td>工号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>住址</td>
                <td>所在部门</td>
                <td>操作</td>
            </tr>
            <#--引入员工列表，emps是一个pageresult，取出每行的数据-->
            <#list emps.rows as e>
                <tr>
                    <td>${e.eid}</td>
                    <td>${e.ename}</td>
                    <td>${e.sex}</td>
                    <td>${e.city}</td>
                    <td>${e.dname}</td>
                    <td>
            <#-- 按钮组：修改和删除-->
                        <div class="btn-group">
                            <a  class="btn btn-success btn-sm"
                                onclick="showDialog('${e.eid}','${e.ename}','${e.sex}','${e.city}','${e.did}')">
                                <span class="glyphicon glyphicon-pencil"></span>
                            </a>
                            <a href="/emp2/delete.do?eid=${e.eid}" class="btn btn-danger btn-sm"
                               onclick="return confirm('确定要删除吗?')">
                                <span class="glyphicon glyphicon-trash"></span>
                            </a>
                        </div>
                    </td>
                </tr>
            </#list>
        </table>
        <#-- 页尾-->
        <div class="panel-footer text-right clearfix">
        <#-- 模糊查询输入框-->
            <form class="form-inline"  style="float: left" action="/emp2/search.do" method="post" id="form0">
        <#-- 这里加一个隐藏域，记录当前页的值 初始是1-->
                <input class="hidden" name="page" id="page" value="1">
                <div class="form-group">
                    <input type="text" id="quer" class="form-control" name="ename" placeholder="在此输入姓名..." value="${vo.ename!""}">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" name="city" placeholder="在此输入住址..." value="${vo.city!""}">
                </div>
                <div class="form-group">
                    <div class="col-sm-10" id="qwer">
                        <select class="form-control" name="did" id="did">
                            <option value="0">所有部门</option>
                            <#list depts as d>
                                <option value="${d.did}" ${(d.did==vo.did)?then('selected','')}>${d.dname}</option>
                            </#list>
                        </select>
                    </div>
                </div>
            <#-- 查询按钮-->
                <button type="submit" class="btn btn-primary" onclick="searchEm()">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>
            <#-- 分页导航-->
            <nav >
                <ul class="pagination" style="float:right;margin-top:0;margin-right: 30px;">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <#-- 分页导航写在这里-->
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
<#--            添加按钮-->
            <a  class="btn btn-info btn-sm" id="adbtn" onclick="showDialog()">添加</a>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="title">这是标题</h4>
            </div>
            <div class="modal-body" >
                <form class="form-horizontal" id="form1" action="/emp2/add.do" method="post" >
                    <input type="hidden" name="eid"  id = "eid">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">姓名:</label>
                        <div class="col-sm-10">
                            <input type="text" name="ename" id="ename" class="form-control"  placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">性别:</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="sex1" value="男" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="sex2" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">住址:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="city" name="city" placeholder="住址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">部门:</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="did" id="did1">
                                <#list depts as d>
                                    <option value="${d.did}">${d.dname}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭(C)</button>
                <button type="button" class="btn btn-primary" onclick="save()">保存(S)</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>

<script>
    //窗体加载完后调用
    $(function (){
        pagexxx()
    })
    // 保存员工（添加或修改后）
    function save(){
        //提交表单
        $("#form1").submit();
    }
    //修改对话框
    function showDialog(eid,ename,sex,city,did) {
        //为表单设置值
        $("#eid").val(eid);
        $("#ename").val(ename);
        //设置性别
        if(sex === '男'){
            $("#sex1").prop("checked",true);
        }else{
            $("#sex2").prop("checked",true);
        }
        $("#city").val(city);
        $("#did1").val(did);

        //定义url地址(修改)
        let url = "/emp2/update.do";
        //判断eid是否有值
        if(eid){        // eid有值，就是修改操作
            //修改标题
            $("#title").text("修改员工");
            // eid无值，就是添加操作
        }else{
            //添加的url地址
            url = "/emp2/add.do"
            //修改标题
            $("#title").text("添加员工");
            //重置表单
            $("#form1")[0].reset();  // $("#form1")[0]: 将jquery对象转换为dom对象
        }
        //显示对话框
        $('#myModal').modal('show')
        //修改表单的url地址
        $('#form1')[0].action = url;
    }
    //查询：点击查询按钮或点击分页导航超链接
    function searchEm(page){
        //如果page有值，就为隐藏域赋值
        $("#page").val(page)
        //提交表单
        document.forms[0].submit()
    }
    //动态生成分页导航
    function pagexxx(){
        let totalPage = ${emps.totalPage};
        //遍历动态生成分页导航
        //定义分页导航字符串
        let navInfo = "";
        for (let i = 1; i <= totalPage ; i++) {
            //定义导航的样式名字
            let clssName = ""
            if(${emps.page} === i){
                clssName = "active";
            }
            //拼接分页导航字符串
            navInfo += "<li class=" + clssName+ "><a href='javascript:void(0)' onclick='searchEm("+i+")'>" + i +"</a></li>"
        }
        //将分页导航放到第一个li的后面
        $(".pagination li").first().after(navInfo);
    }
</script>
